<template>
  <div class="app-popup-mask"  v-if="showRedpackDialog">
    <transition enter-active-class="zoomIn" leave-active-class="zoomOut" v-on:after-leave="afterLeave">
      <div v-if="isShowObtain" class="redpack animated">
        <span id="close" @click="showRedpackDialog = false">+</span>
        <div class="redpack-body not-open">
          <div class="redpack-desc-content">
            <div class="avatar">
              <div class="avatar-img">
                <img src="//fin.91mycloud.com/company-logo.png" alt="">
              </div>
            </div>
            <h2>早教CRM</h2>
            <span class="text">给你发了一个红包</span>
            <div class="description">{{ data.desc }}</div>
          </div>
          <div class="chai" id="chai" @click="$openRedpack" :class="{'rotate': isOpen}">
            <span>拆红包</span>
          </div>
          <x-dialog v-model="this.$store.state.app.dialogShow">
            <div class="dialog-message">
              {{ this.$store.state.app.dialogMessage }}
            </div>
            <span class="vux-close" @click="hideDialog">知道了</span>
          </x-dialog>
        </div>
      </div>
    </transition>
    <transition enter-active-class="zoomIn" leave-active-class="zoomOut" v-on:after-leave="showRedpackDialog = false">
      <div v-if="isShowResult" class="redpack animated">
        <div class="redpack-body">
          <span id="close" @click="isShowResult = false">+</span>
          <div class="redpack-result-body">
            <div class="avatar">
              <div class="avatar-img">
                <img class="no-border" src="//fin.91mycloud.com/company-logo.png" alt="">
              </div>
            </div>
            <h2>早教CRM</h2>
            <div class="description">恭喜您领取到了<i class="redpacket-money">{{ redpacketMoney }}</i>元红包!</div>
            <div class="description"><span @click="toRecord" class="redpack-link" >查看红包记录</span></div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<style lang="less">
  .app-popup-mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    // opacity: 0;
    tap-highlight-color: rgba(0, 0, 0, 0);
    z-index: 10000;
    // transition: opacity 400ms;
  }

  .redpack {
    box-sizing: border-box;
    // text-align: center;
    // width: 100%;
    // max-width: 960px;
    // margin: 0 auto;
    // padding: 15px 5px;
    // background-color: rgba(0,0,0,0.3);
    // height: 100%;
    // position: absolute;
    & *{
      box-sizing: border-box;
    }

    & {
      -vendor-animation-duration: 3s;
      -vendor-animation-delay: 2s;
      -vendor-animation-iteration-count: infinite;
    }

  }

  .redpack .weui-dialog {
    color: #333;
  }
  .redpack .dialog-message {
    padding: 20px 10px;
    text-align: left;
  }

  .redpacket-money {
    font-style: normal;
  }

  .redpack-link {
    font-size: 12px;
    color: white;
    text-decoration: underline;
    cursor: pointer;
  }

  .result-avatar {
    overflow: hidden;
    margin-top: 10%;
    width: 100%;
  }

  .redpack-body {
    position: relative;
    overflow: hidden;
    height: 450px;
    text-align: center;
    background: #A5423A;
    width: 300px;
    left: 0;
    border-radius: 10px;
    margin: 4rem auto 0;
    color: #fff;
  }

  .redpack-result-body {
    padding-top: 60px;
  }

  .redpack-desc-content{
    height: 268px;
    border: 1px solid #BD503A;
    background-color: #BD503A;
    // border-radius: 10px 10px 50% 50% / 10px 10px 15% 15%;
    border-bottom-left-radius: 18%;
    border-bottom-right-radius: 18%;
    box-shadow: 0px 4px 0px -1px rgba(0,0,0,0.2);
  }
  .avatar{
      position: relative;
  }
  .avatar span{

  }
  #close{
      color: rgba(0,0,0,0.5);
      position: absolute;
      top: 10px;
      right: 15px;
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg);
      font-size: 2em;
      font-weight: bolder;
      z-index: 10;
  }
  .avatar img{
      border: 1px solid #BD503A;
      // border-radius: 50%;
      overflow: hidden;
      margin-top: 10%;
      width: 100%;

      &.no-border{
        border: none;
      }
  }


  .avatar-img {
    width: 80px;
    height: 88px;
    margin: 0 auto;
    // background-color: white;
  }

  .redpack-desc-content h2{
      margin: 15px 0;
  }
  .text{
      color: #999;
  }
  .description{
      margin: 15px 0;
      font-size: 16px;
      font-weight: 600;
  }
  #chai{
      width: 100px;
      height: 100px;
      border: 1px solid #FFA73A;
      background-color: #FFA73A;
      border-radius: 50%;
      color: #fff;
      font-size: 20px;
      display: inline-block;
      margin-top: -50px;
      box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
  }
  #chai span{
      margin-top: 35px;
      display: inline-block;
  }
  .rotate{
      -webkit-animation: anim .6s infinite alternate;
          -ms-animation: anim .6s infinite alternate;
              animation: anim .6s infinite alternate;
  }
  @-webkit-keyframes anim {
      from { -webkit-transform: rotateY(180deg); }
      to { -webkit-transform: rotateY(360deg); }
  }
  @-ms-keyframes anim {
      from { -ms-transform: rotateY(180deg); }
      to { -ms-transform: rotateY(360deg); }
  }
  @keyframes anim {
      from { transform: rotateY(180deg); }
      to { transform: rotateY(360deg); }
  }
</style>
<script>
  import { mapState, mapActions } from 'vuex'
  import Popup from 'vux/src/components/popup'
  import XDialog from 'vux/src/components/x-dialog'
  import {showDialog, hideDialog} from '../lib/dialog'
  import Q from 'q'

  export default {
    props: {
      data: {
        type: Object,
        default: {
          red_creater_id: '',
          desc: ''
        }
      }
    },
    methods: {
      afterLeave () {
        if (this.isOpen) {
          this.isShowResult = true
        } else {
          this.showRedpackDialog = false
        }
      },
      hideDialog: hideDialog,
      close () {
        this.$emit('click')
      },
      toRecord () {
        this.$router.push({ name: 'redpack-link' })
        this.showRedpackDialog = false
      },
      $openRedpack () {
        if (this.lock) return
        this.lock = true
        this.isOpen = true
        this.requestRedpack().then((redpacketMoney) => {
          this.lock = false
          this.isShowObtain = false
          this.redpacketMoney = redpacketMoney
        })
      },
      requestRedpack () {
        return Q.Promise((resolve, reject) => {
          console.log(this.data)
          this.openRedpack(this.data).then((response) => {
            resolve(response.data.results.redpacket_money)
          }).catch((e) => {
            this.isOpen = false
            this.lock = false
            showDialog('系统错误！重试两次如果不行请联系管理员!')
          })
        })
      },
      ...mapActions({
        openRedpack: 'openRedpack'
      })
    },
    destroyed () {
      clearTimeout(this.tid)
    },
    data () {
      return {
        isOpen: false,
        isShowObtain: false,
        showRedpackDialog: true,
        isShowResult: false,
        redpacket_money: 0
      }
    },
    components: {
      Popup,
      XDialog
    },
    mounted () {
      this.isShowObtain = true
      // this.isShowResult = true
    },
    computed: {
      ...mapState({
        user: state => state.app.user
      })
    }
  }
</script>
